<template>
  <view class="" style="width: 750rpx;">
    123
    <view class="fatherCard" :style=" cardWardData.length == 1?'justify-content: center;':'' ">
      <view class="card" :style=" cardWardData.length == 1?'margin-left:0':'' " v-for="(item,i) in cardWardData"
        :key="i">
        <view class="card__content"
          :class=" item.isStartChangeCard? item.level ==1 ?'linghtType2' :'linghtType3'  : 'linghtType1' "
          :style=" item.isStartChangeCard? 'transform: rotateY(180deg)' :'transform: rotateY(0deg)'">
          <image style="width: 100%;" :src="item.images" mode="widthFix"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {

    },
    name: "drawcard",
    data() {
      return {
        idIndex: 0,
        dataLen: 0,
        cardWardData: [{
            isStartChangeCard: false,
            level: 1,
            wardImg: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-058a03e3-f5c2-4491-bff4-8b9cb1b4ccb5/6f86f579-58ea-40ca-aa19-41829aa0862a.jpg'
          },
          {
            isStartChangeCard: false,
            level: 2,
            wardImg: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-058a03e3-f5c2-4491-bff4-8b9cb1b4ccb5/6f86f579-58ea-40ca-aa19-41829aa0862a.jpg'
          }, {
            isStartChangeCard: false,
            level: 1,
            wardImg: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-058a03e3-f5c2-4491-bff4-8b9cb1b4ccb5/6f86f579-58ea-40ca-aa19-41829aa0862a.jpg'
          }, {
            isStartChangeCard: false,
            level: 1,
            wardImg: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-058a03e3-f5c2-4491-bff4-8b9cb1b4ccb5/6f86f579-58ea-40ca-aa19-41829aa0862a.jpg'
          }, {
            isStartChangeCard: false,
            level: 1,
            wardImg: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-058a03e3-f5c2-4491-bff4-8b9cb1b4ccb5/6f86f579-58ea-40ca-aa19-41829aa0862a.jpg'
          }, {
            isStartChangeCard: false,
            level: 1,
            wardImg: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-058a03e3-f5c2-4491-bff4-8b9cb1b4ccb5/6f86f579-58ea-40ca-aa19-41829aa0862a.jpg'
          },
        ]
      };
    },
    onLoad() {
      this.$uniCloud('imagesBase', {
        type: 'get'
      }).then(res => {
        if (res.result && res.result[0]) {
          this.cardWardData = res.result[1].data
          this.cardWardData.forEach((item, index) => {
            item['isStartChangeCard'] = false
          })
          this.dataLen = this.cardWardData.length
          setTimeout(() => {
            this.rotateCards()
          }, 500)
        }
      })

    },
    methods: {
      rotateCards() {
        if (this.cardWardData.length == 0) {
          return
        }
        this.cardWardData[this.idIndex].isStartChangeCard = true
        this.rotateCard()
        this.$forceUpdate()
      },
      rotateCard() {
        this.dataLen--
        if (this.dataLen <= 0) {
          setTimeout(() => {
            // 延迟400ms 发送翻牌结束状态
            this.$emit('drawBoxEnd', true);
          }, 800);
          return
        }
        setTimeout(() => {
          this.cardWardData[this.idIndex].isStartChangeCard = true
          // 递归函数
          this.rotateCard()
        }, 400);
        this.idIndex++
      }
    }
  }
</script>
<style lang="scss" scoped>
  .fatherCard {
    width: 100%;
    margin: 0 auto;
    column-count: 2;
    column-gap: 40rpx;
    background: #28272D;
  }

  .card {
    width: 100%;
    flex-shrink: 0;
    border-radius: 20upx;
  }

  .linghtType1 {
    box-shadow: 0upx 0upx 26upx 4upx #fff;
  }

  .linghtType2 {
    box-shadow: 0upx 0upx 26upx 4upx #FFC03E;
  }

  .linghtType3 {
    box-shadow: 0upx 0upx 26upx 4upx #EF623D;
  }

  .card__content {
    width: 100%;
    text-align: center;
    transition: all 1s;
    transform-style: preserve-3d;
    border-radius: 20upx;
  }

  .card__front,
  .card__back {
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    color: white;
    border-radius: 20upx;
  }

  .card__back {
    background-color: #28272D;
    transform: rotateY(180deg);
  }

  .label {
    display: flex;
    align-items: center;
    margin-top: 6upx;

    .numCla {
      background: rgba(125, 125, 121, 0.3);
      padding: 3upx 15upx;
      left: -5px;
      z-index: 1;
      color: rgba(250, 225, 174, 1);
      border-radius: 5upx;
      font-size: 20upx;
    }
  }

  .detailBox {
    z-index: 111;
    top: 73%;
    font-size: 30upx;
  }
</style>
